<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
     <link rel="stylesheet" href="/css/shop.css"/>
  </head>
  <body  >
    <div class="container-fluid" >
    	<div class="row pt-10 pl-0 pr-0 p-sticky t-0 bc-w pb-10" >
    		<div class="col-xs-1 col-sm-offset-1">
    			<span class="c-y" id="back">&lt;</span>
    		</div>
    		<div class="center-block" style="width: 10rem;">易来客运</div>
    	</div>
    	<div class="row">
    		<div class="col-xs-12 pl-0 pr-0 col-sm-10 col-sm-offset-1">
    			<div id="myCarousel" class="carousel slide">
				    <!-- 轮播（Carousel）指标 -->
				    <ol class="carousel-indicators">
				        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				        <li th:remove="all" data-target="#myCarousel" data-slide-to="1"></li> 
				        <li th:remove="all" data-target="#myCarousel" data-slide-to="2"></li>
				    </ol>   
				    <!-- 轮播（Carousel）项目 -->
				    <div class="carousel-inner">
				        <div class="item active">
				            <img th:src="'/'+${train.bannerImg}" class="w-100" src="/images/car1-show.png" alt="First slide"/>
				            <div class="carousel-caption">易来客运</div>
				        </div>
				        <div th:remove="all" class="item">
				            <img class="w-100" src="/images/car1-show.png" alt="Second slide"/>
				            <div class="carousel-caption">标题 2</div>
				        </div>
				        <div th:remove="all" class="item">
				            <img class="w-100" src="/images/car1-show.png" alt="third slide"/>
				            <div class="carousel-caption">标题 3</div>
				        </div>
				    </div>
				    <!-- 轮播（Carousel）导航 -->
				    <a class="carousel-control left" href="#myCarousel" 
				        data-slide="prev">&lsaquo;
				    </a>
				    <a class="carousel-control right" href="#myCarousel" 
				        data-slide="next">&rsaquo;
				    </a>
				</div>
    		</div>
    	</div>


	    <div class="row">
	    	<div class="col-xs-12 col-sm-10 col-sm-offset-1">
	    			<h4><strong th:text="${train.name}">神木X景区直通车</strong></h4>
	    			<p th:utext="${train.introducePlace}" class="">每天发车，从成都直达神木X，途径邓池沟</p>
	    			<h4><span class="label label-warning ">特惠</span><strong th:text="${train.price}" class="c-r">220</strong>元<small class="c-r">/人</small></h4>
	    			<p th:utext="${train.introduceServer}" class="">精选优质舒适空调巴士，车内宽敞舒适，点对点直达景区</p>
	    		</div>
	    	<div class="col-xs-12 col-sm-10 col-sm-offset-1 pt-5 bt-h">
	    			<p>费用包含往返车费和景区住宿一晚</p>
	    		</div>
	    	<div class="col-xs-12 col-sm-10 col-sm-offset-1 pt-5 bt-h pb-5 bb-h p-sticky t-30 bc-w"  id="scrollspy" >
	    			<ul class="nav ">
	    			
					<li class="li-l">
	    				<a class="a-y" href="#scro1" tabindex="-1">产品特色</a>
	    			</li>
	    			<li class="li-l">
	    				<a class="a-y" href="#scro2" tabindex="-1">行程安排</a>
	    			</li>
	    			<li class="li-l">
	    				<a class="a-y" href="#scro3" tabindex="-1">须知</a>
	    			</li>
	    			</ul >
	    		</div>
	    	<div class="col-xs-12 col-sm-10 col-sm-offset-1 pl-0 pr-0 t-90 pb-90" data-spy="scroll" data-target="#scrollspy" data-offset-top="90"
	    		style="height:500px;overflow:auto; position: sticky;"> 
		    		<div class="col-xs-12 b-h pt-20" id="scro1" >
		    			<div class="col-xs-12" >
		    				<h4><span class="label label-warning ">产品特色</span></h4>
		    				<div th:if="${pro}">
		    				<div class="p-m-0" th:utext="${pro.step1}">
		    				<p>D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用
		    				D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用</p>
		    				<img src="/images/show1-1.png" class="img-thumbnail img-responsive bb-i"/>
		    				</div>
		    				<span id="s1" class="center-block w-6 text-muted" data-toggle="collapse"  data-target="#p1">︾</span>
		    				<div id="p1" class="collapse" >
		    				<div class="p-m-0" th:utext="${pro.step2}">
		    				<img src="/images/show1-2.png" class="img-thumbnail img-responsive bt-i"/>
		    				<p >D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用
		    				D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用
		    				D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用
		    				D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用</p>
		    				</div>
		    				<span id="s2" class="center-block w-6 text-muted pb-5" data-toggle="collapse"  data-target="#p1">︽</span>
		    				</div>
		    				</div>
		    				<div th:unless="${pro}">
		    				<div th:utext="${train.productFeatures}">
		    				<p>D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用
		    				D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用</p>
		    				<img src="/images/show1-1.png" class="img-thumbnail img-responsive bb-i"/>
		    				</div>
		    				</div>
		    			</div>
		    		</div>
		    		<div class="col-xs-12 b-h pt-20" id="scro2">
		    			<div class="col-xs-12">
		    				<h4><span class="label label-warning ">行程安排</span></h4>
		    				<div th:if="${sch}">
		    				<div class="p-m-0" th:utext="${sch.step1}">
		    				<p>D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用
		    				D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用</p>
		    				<img src="/images/show1-1.png" class="img-thumbnail img-responsive bb-i"/>
		    				</div>
		    				<span id="s3" class="center-block w-6 text-muted" data-toggle="collapse"  data-target="#p2">︾</span>
		    				<div id="p2" class="collapse">
		    				<div class="p-m-0" th:utext="${sch.step2}">
		    				<img src="/images/show1-2.png" class="img-thumbnail img-responsive bt-i"/>
		    				<p >D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用
		    				D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用
		    				D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用
		    				D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用</p>
		    				</div>	
		    				<span id="s4" class="center-block w-6 text-muted pb-5" data-toggle="collapse"  data-target="#p2">︽</span>
		    				</div>
		    				</div>
		    				<div th:unless="${sch}">
		    				<div th:utext="${train.scheduling}">
		    				<p>D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用
		    				D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用</p>
		    				<img src="/images/show1-1.png" class="img-thumbnail img-responsive bb-i"/>
		    				</div>
		    				</div>
		    			</div>
		    		</div>
		    		<div class="col-xs-12 b-h pt-20" id="scro3">
		    			<div class="col-xs-12" >
		    				<h4><span class="label label-warning ">须知</span></h4>
		    				<div th:if="${noti}">
		    				<div class="p-m-0" th:utext="${noti.step1}">
		    				<p>D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用
		    				D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用</p>
		    				<img src="/images/show1-1.png" class="img-thumbnail img-responsive bb-i"/>
		    				</div>
		    				<span id="s5" class="center-block w-6 text-muted" data-toggle="collapse"  data-target="#p3">︾</span>
		    				<div id="p3" class="collapse">
		    				<div class="p-m-0" th:utext="${noti.step2}">
		    				<img src="/images/show1-2.png" class="img-thumbnail img-responsive bt-i"/>
		    				<p >D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用
		    				D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用
		    				D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用
		    				D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用</p>
		    				</div>
		    				
		    				<span id="s6" class="center-block w-6 text-muted pb-5" data-toggle="collapse"  data-target="#p3">︽</span>
		    				
		    				</div>
		    				</div>
		    				<div th:unless="${noti}">
		    				<div  th:utext="${train.notice}">
		    				<p>D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用
		    				D1:XXXXXXXXXXXXX站位备用D1:XXXXXXXXXXXXX站位备用</p>
		    				<img src="/images/show1-1.png" class="img-thumbnail img-responsive bb-i"/>
		    				</div>
		    				</div>
		    			</div>
		    		</div>
	    		</div>
		    <div class="col-xs-12 col-sm-10 col-sm-offset-1 bc-h bc-w pb-40">
		    		<p class="pl-10 pr-10"><small>关注易来客运微信公众号[easylines]，长途出行，值得信赖！关注后绑定账号，享更多优惠提醒！如有疑问，请联系客服：
		    				13981732546吕先生</small></p>
		    		</div>
		    <div class="col-xs-12 col-sm-10 col-sm-offset-1 pr-0 bc-w p-fixed b-0">
		    		<span class="bq-y  my-5 pull-left">特惠</span>
		    		<strong th:text="${train.price}" class="c-r ml-10 mt-10  pull-left">220</strong><small class="c-r pull-left mt-13">元/人</small>
		    		<span class="pull-right   w-13 t-center  btn-y"><strong>立即预定</strong> </span>
		    	</div>

	    	</div>
    	</div>
    
	
    <!-- jQuery first, then Bootstrap JS. -->
    <script src="/lib/jquery/1.9.1/jquery.min.js"></script>
    <script src="/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/url.js"></script>
    <script type="text/javascript">
    $('#back').bind('click',function(){
    	goTo('/shop/index');
    });
    $('#p1').on('show.bs.collapse', function () {
    	$("#s1").toggle();
	});
    $('#p1').on('hidden.bs.collapse', function () {
    	$("#s1").toggle();
	});
    
    $('#p2').on('show.bs.collapse', function () {
    	$("#s3").toggle();
	});
    $('#p2').on('hidden.bs.collapse', function () {
    	$("#s3").toggle();
	});
    
    $('#p3').on('show.bs.collapse', function () {
    	$("#s5").toggle();
	});
    $('#p3').on('hidden.bs.collapse', function () {
    	$("#s5").toggle();
	});
    </script>
  </body>
</html>